<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>产品列表</title>
    <!-- 引入jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<body class="d-flex justify-content-center align-items-center" style="height: 100vh; margin: 0;">

<div class="container">

    <h1>产品列表</h1>

    <table id="productTable">
        <tr th:each="product : ${products}" th:id="${'product-' + product.productId}">
            <td>
                <form class="update-form" th:action="@{/api1/products/update}" th:method="post">
                    <input type="hidden" th:name="productId" th:value="${product.productId}" />
                    <input type="text" th:name="productName" th:value="${product.productName}" />
                    <input type="text" th:name="category" th:value="${product.category}" />
                    <input type="text" th:name="brand" th:value="${product.brand}" />
                    <input type="number" th:name="price" th:value="${product.price}" />
                    <input type="number" th:name="stockQuantity" th:value="${product.stockQuantity}" />
                    <button type="submit">更新</button>
                </form>
            </td>
            <td>
                <form class="delete-form" th:action="@{/api1/products/delete}" th:method="post">
                    <input type="hidden" th:name="productId" th:value="${product.productId}" />
                    <button type="submit">删除</button>
                </form>
            </td>
        </tr>
    </table>
    <h2>添加产品</h2>
    <form id="addProductForm" th:action="@{/api1/products/add}" th:method="post">
        <input type="text" th:name="productName" placeholder="产品名称" />
        <input type="text" th:name="category" placeholder="类别" />
        <input type="text" th:name="brand" placeholder="品牌" />
        <input type="number" th:name="price" placeholder="价格" />
        <input type="number" th:name="stockQuantity" placeholder="库存数量" />
        <button type="submit">添加</button>
    </form>

    <script>
        $(document).ready(function() {
            $(".update-form, .delete-form").on("submit", function(event) {
                event.preventDefault();  // 阻止表单的默认提交行为

                var form = $(this);
                var url = form.attr("action");

                $.ajax({
                    type: "POST",
                    url: url,
                    data: form.serialize(),  // 序列化表单数据
                    success: function(data) {
                        // 页面重定向至产品列表页
                        window.location.href = "/api1/products";
                    }
                });
            });
        });
    </script>

</div>
<!-- 引入Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>




<body>

</body>
</html>
